<template>
  <el-form-item label="默认值">
    <el-input
      v-model="state.activeData._config_.defaultValue"
      :value="setDefaultValue(state.activeData._config_.defaultValue)"
      placeholder="请输入默认值"
      @change="onDefaultValueInput(state.activeData, state.activeData._config_.defaultValue)"
    />
  </el-form-item>
  <el-form-item label="前缀">
    <el-input v-model="state.activeData.slot.prepend" placeholder="请输入前缀" />
  </el-form-item>
  <el-form-item label="后缀">
    <el-input v-model="state.activeData.slot.append" placeholder="请输入后缀" />
  </el-form-item>
  <el-form-item label="前图标">
    <SelectIcon v-model:icon-value="state.activeData['prefix-icon']" placeholder="前图标" type="all" />
  </el-form-item>
  <el-form-item label="后图标">
    <SelectIcon v-model:icon-value="state.activeData['suffix-icon']" placeholder="后图标" type="all" />
  </el-form-item>
  <el-form-item label="最多输入">
    <el-input-number v-model="state.activeData.maxlength" placeholder="字符长度" :min="0"> </el-input-number>
  </el-form-item>
  <el-form-item label="显示标签">
    <el-switch v-model="state.activeData._config_.showLabel" />
  </el-form-item>
  <el-form-item label="输入统计">
    <el-switch v-model="state.activeData['show-word-limit']" />
  </el-form-item>
  <el-form-item label="能否清空">
    <el-switch v-model="state.activeData.clearable" />
  </el-form-item>
  <el-form-item label="是否密码">
    <el-switch v-model="state.activeData['show-password']" />
  </el-form-item>
  <el-form-item label="是否只读">
    <el-switch v-model="state.activeData.readonly" />
  </el-form-item>
  <el-form-item label="是否禁用">
    <el-switch v-model="state.activeData.disabled" />
  </el-form-item>
  <el-form-item label="是否隐藏">
    <el-switch v-model="state.activeData._config_.noShow" />
  </el-form-item>
  <el-divider>校验规则</el-divider>
  <el-form-item label="是否必填">
    <el-switch v-model="state.activeData._config_.required" />
  </el-form-item>
  <div v-for="(item, index) in state.activeData._config_.regList" :key="index" class="reg-item">
    <span class="close-btn" @click="state.activeData._config_.regList.splice(index, 1)">
      <el-icon><Delete /></el-icon>
    </span>
    <el-form-item label="表达式">
      <el-input v-model="item.pattern" placeholder="请输入正则" />
    </el-form-item>
    <el-form-item label="错误提示" style="margin-bottom: 0">
      <el-input v-model="item.message" placeholder="请输入错误提示" />
    </el-form-item>
  </div>
  <div class="mb10">
    <el-dropdown>
      <el-button type="primary">添加常用校验<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="addHandle(item)" v-for="(item, i) in state.ruleList" :key="i">
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-button type="primary" @click="addReg(state.activeData)" style="margin-left: 10px"> 自定义规则 </el-button>
  </div>
</template>
<script lang="ts" setup name="GoodInput">
import { reactive } from "vue";
import { onDefaultValueInput, setDefaultValue, addReg } from "./mixin";
//import IconSelector from "@/components/iconSelector/index.vue";
import SelectIcon from "@/components/SelectIcon/index.vue";
import { Delete } from "@element-plus/icons-vue";
const props = defineProps({
  activeData: {
    type: Object,
    default: null
  }
});

const state = reactive({
  activeData: {} as any,
  ruleList: [
    {
      pattern: "/^\\d+$/",
      message: "请输入正确的数字",
      label: "数字"
    },
    {
      pattern: "/^[1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*|0?\\.0+|0$/",
      message: "请输入正确的金额",
      label: "金额"
    },
    {
      pattern: "/^0\\d{2,3}-?\\d{7,8}$/",
      message: "请输入正确的电话号码",
      label: "电话"
    },
    {
      pattern: "/^1[3456789]\\d{9}$/",
      message: "请输入正确的手机号码",
      label: "手机"
    },
    {
      pattern: "/^1[3456789]\\d{9}$|^0\\d{2,3}-?\\d{7,8}$/",
      message: "请输入正确的联系方式",
      label: "电话/手机"
    },
    {
      pattern: "/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/",
      message: "请输入正确的邮箱",
      label: "邮箱"
    },
    {
      pattern: "/^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$/",
      message: "请输入正确的身份证号码",
      label: "身份证"
    }
  ]
});
const propsData = toRef(props);
state.activeData = propsData.value.activeData;

const addHandle = (row: any) => {
  state.activeData._config_.regList.push({
    pattern: row.pattern,
    message: row.message
  });
};

const emits = defineEmits(["updateActiveData"]);
watch(
  () => state.activeData,
  val => {
    emits("updateActiveData", val);
  }
);
</script>
